<template>
    <div class="comment-info" v-if="Object.keys(commentInfo).length !== 0">
    <div class="info-header">
        <div class="info-header-com">
        <div class="header-title">用户评论</div>
        <div class="header-more">
            更多
            <i class="arrow-right"></i>
        </div>
        </div>
    </div>

    <div class="info-user">
        <div class="info-user-com">
        <img :src="commentInfo.user.avatar" alt="用户头像">
        <span>用户: {{ commentInfo.user.uname }}</span>
        </div>       
    </div>

    <div class="info-detail">
        <div class="info-detail-com">
        <p>{{ commentInfo.content }}</p>
        <div class="info-other">
             <!-- timeDate 时间过滤器 -->
            <span class="date">{{ commentInfo.created | timeDate }}</span>
            <span>{{ commentInfo.style }}</span>
        </div>
        </div>
        <div class="info-imgs">
            <img :src="item" v-for="(item, i) in commentInfo.images" :key="i">
        </div>
    </div>
      <div class="shangpingTJ">
        <hr>
        <span>更多商品推荐.....</span>
      </div>
    </div>
</template>

<script>

export default {
    name: 'DetailCommentInfo',
    props: {
       commentInfo: {
           type: Object,
           default() {
               return {}
           }
       }
    },
}
</script>

<style>
.comment-info{
    width: 100%;
}
.comment-info .info-header{
    padding: 0  8px 13px 8px;
}
.comment-info .info-header .info-header-com{
    display: flex;
    padding: 4px 8px;
    line-height: 35px;
    background-color: #e4e4e47a;
    border-radius: 5px;
    color: #000;
}
.comment-info .info-header .info-header-com .header-title{
     flex: 1;
}
.comment-info .info-header .info-header-com  .header-more{
    padding-right: 5px;
}
.comment-info .info-user{
    padding: 0 8px;
}
.comment-info .info-user .info-user-com{
   display: flex;
   height: 45px;
   background-color: #e4e4e445;
}
.comment-info .info-user .info-user-com img{
   height: 100%;
   padding-left: 8px;
}
.comment-info .info-user .info-user-com span{
    padding-left: 15px;
    line-height: 45px;
}
.comment-info .info-detail{
    padding: 0 8px 20px 8px;
}
.comment-info .info-detail .info-detail-com{
    background-color: #e4e4e445;
}
.comment-info .info-detail p{
    /* padding-left: 8px;
    padding-top: 8px; */
    padding: 8px 0 0 8px; 
    font-size: 15px;
}
.comment-info .info-detail .info-detail-com .info-other{
  line-height: 30px;
  font-size: 12px;
}
.comment-info .info-detail .info-detail-com .info-other .date{
  padding-right: 8px;
}
.comment-info .info-detail .info-imgs{
    display: flex;
    height: auto;
    width: 80px;
    height: 80px;
}
.comment-info .info-detail .info-imgs img{
  flex: 1;
  padding-right: 4px;
}
.comment-info .shangpingTJ{
    padding: 5px 8px 10px 8px;
}
.comment-info .shangpingTJ span {
   font-size: 13px;
   color: #000;
}
</style>